<template>
  <div id="container"></div>
</template>

<script>
import * as THREE from 'three'
import {OrbitControls} from "three/addons/controls/OrbitControls";
import { Water } from 'three/examples/jsm/objects/Water.js';
import { Sky } from 'three/examples/jsm/objects/Sky'

let scene;
export default {
  name: "bay-single",
  data() {
    return{
      camera:null,
      water:undefined,
    }
  },
  methods:{
    initScene(){
      scene = new THREE.Scene();
    },
    initCamera(){
      this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 10000);
      this.camera.position.set(100,100,100);
    },
    initWater(){
      const waterGeometry = new THREE.PlaneGeometry(10000, 10000);
      this.water = new Water(
          waterGeometry,
          {
            textureWidth: 512,
            textureHeight: 512,
            waterNormals: new THREE.TextureLoader().load('/static/images/waternormals.jpg', function (texture) {
              texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
            }),
            sunDirection: new THREE.Vector3(),
            sunColor: 0xffffff,
            waterColor: 0x294f9a,
            distortionScale: 3.7,
          }
      );
      this.water.rotation.x = - Math.PI / 2;
      scene.add(this.water)
    },
    initSky(){
      let sky = new Sky();
      sky.scale.setScalar( 45000 );//太阳盒子的大小，要把整个场景包含进去
      scene.add( sky );

      const effectController = {
        turbidity: 10,//浑浊度
        rayleigh: 3,//阳光散射，黄昏效果的程度
        mieCoefficient: 0.005,//太阳对比度，清晰度
        mieDirectionalG: 0.7,
        elevation: 2,//太阳高度
        azimuth: 180,//太阳水平方向位置
        exposure: this.renderer.toneMappingExposure //光线昏暗程度
      };

      let sun = new THREE.Vector3();
      const uniforms = sky.material.uniforms;
      uniforms[ 'turbidity' ].value = effectController.turbidity;
      uniforms[ 'rayleigh' ].value = effectController.rayleigh;
      uniforms[ 'mieCoefficient' ].value = effectController.mieCoefficient;
      uniforms[ 'mieDirectionalG' ].value = effectController.mieDirectionalG;
      const phi = THREE.MathUtils.degToRad( 90 - effectController.elevation );
      const theta = THREE.MathUtils.degToRad( effectController.azimuth );
      sun.setFromSphericalCoords( 1, phi, theta );
      uniforms[ 'sunPosition' ].value.copy( sun );
      this.renderer.toneMappingExposure = effectController.exposure;
      this.renderer.render( scene, this.camera );
    },
    initRenderer(){
      this.renderer = new THREE.WebGLRenderer({ antialias: true });
      this.container = document.getElementById("container")
      this.renderer.setSize(this.container.clientWidth, this.container.clientHeight);
      this.renderer.setClearColor('#294f9a', 1.0);
      this.container.appendChild(this.renderer.domElement);
    },
    initControl(){
      this.controls = new OrbitControls(this.camera, this.renderer.domElement);
      this.controls.enableDamping = true;
      // 最大角度
      this.controls.maxPolarAngle = Math.PI / 2.2;
    },
    initAnimate() {
      this.water.material.uniforms["time"].value += 1.0 / 60.0;
      requestAnimationFrame(this.initAnimate);
      this.renderer.render(scene, this.camera);
    },
    initPage(){
      this.initScene();
      this.initCamera();
      this.initRenderer();
      this.initControl();
      this.initWater();
      this.initSky();
      this.initAnimate();
    }
  },
  mounted() {
    this.initPage()
  }
}
</script>

<style scoped>
#container{
  position: absolute;
  width:100%;
  height:100%;
  overflow: hidden;
}
</style>
